/*
 *  HERO
 *  The top showcase image with bold text on each page
 *
 */

.scroll-wrapper-work-hero {
  .scroll-wrapper-inner {
    max-width: none;
  }
}

.hero {
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transform: translateZ(0);

  .hero-inner-wrapper {
    @include core-layout();
    width: 100vw;
    height: 100%;
    // max-width: $grid-max-width;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
  }

  .hero-video {
    height: 100%;
    width: 100vw;
    max-width: none;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .section-title {
    color: $offWhite;
    position: relative;
    z-index: 4;
  }

  .title {
    position: relative;
    z-index: 2;
    color: $offWhite;
    @include text-shadow;
  }

  &.notFullScreen {
    .hero-inner-wrapper {
      position: relative;

      .hero-content {
        height: 100vh;
        padding-bottom: $hero-offsetSize-small;
        display: flex;
        flex-direction: column;
        justify-content: center;

        @media screen and (min-width: $bp-tablet) {
          padding-bottom: $hero-offsetSize;
        }
      }
    }
  }

  .hero-children,
  .hero-down-indicator {
    opacity: 0;
    transition: opacity .2s linear .7s; // This should transition after the WordAnimation components in the Hero js component
  }
  .hero-down-indicator {
    transition-delay: .9s;
  }
  &.active {
    .hero-children,
    .hero-down-indicator {
      opacity: 1;
    }
  }

  @media screen and (min-width: $bp-medium) {

    .title {
      max-width: 80%;
    }
  }

  .rimage {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 92%;
    transform: translate(-50%, -50%);
  }

  .subheading {
    margin-top: 30px;
    max-width: 80%;
    text-align: left;
    color: $offWhite;
  }

  .video {
    height: 200%;
    width: 200%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: 1;

    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      overflow-x: hidden;
      height: auto;
      width: auto;
      min-width: 50%;
      min-height: 50%;
      transform: none;
      webkit-transform: none;
    }
  }

  @media screen and (min-width: 769px) {
    .video {
      height: 100vh;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

.hero-content {
  position: relative;
  z-index: 10;
}

.js {
  .image-entrance {
    transition: opacity .8s ease-in-out;
    transition-delay: 1.3s;
  }

  // .shown .hero {
  //   .down-indicator {
  //     opacity: 1;
  //     transition-delay: 3s;
  //   }
  // }
}

/* NOTE: max-width */
// @media screen and (max-width: $bp-medium) {
//   .hero {
//     width: 100vw;
//     z-index: 1;
//   }
//   .hero-inner-wrapper {
//     position: absolute;
//     height: 100%;
//     display: block;
//
//     .hero-video {
//       height: 100vh;
//       width: 100%;
//       position: absolute;
//       left: 0;
//       top: 0;
//       z-index: 1;
//     }
//   }
// }

.hero-down-indicator {
  position: absolute;
  z-index: 2;
  bottom: 20px;

  @media screen and (min-width: $bp-medium) {
    bottom: 40px;
  }
}
